Занятие 1. Что такое интернет.
Подготовка к работе, установка
стартового ПО
Перед тем как начать обучение, Медведь показал Маше, где найти и как установить все нужные
инструменты, ведь для прохождения курса «Основы WEB-программирования на JavaScript»
требуется установить ряд программ. А пока они устанавливались, Медведь делился интересными
фактами про интернет:
AMPPS
https://www.ampps.com/
Visual Studio Code с расширением «PHP
Intelephense»
https://code.visualstudio.com/download.
Если разрешение Windows ниже
представленных на сайте, скачиваем более
старую версию программы:
https://code.visualstudio.com/updates
Приступим к установке. Убедитесь, что на вашем компьютере есть 20 Гб свободного места.
Для начала найдём и установим AMPPS – эта программа понадобится для разработки на Apache,
MySQL, PHP.
Установка AMPPS
AMPPS (WAMP – MAMP – LAMP) – это пакет решений Apache, MySQL, PHP, Perl и
Python для Windows и macOS.
WAMP – Windows Apache MySQL PHP.
MAMP – Mac Apache MySQL PHP.
LAMP – Linux Apache MySQL PHP.
Apache – веб-сервер, отличающийся широкими возможностями конфигурации и
высоким уровнем поддержки.
MySQL – система управления базами данных.
PHP – скриптовый язык общего назначения, интенсивно применяемый для
разработки веб-приложений.
Perl – язык программирования общего назначения.
Python – это язык программирования, который широко используется в интернет-
приложениях, разработке программного обеспечения, науке о данных и
машинном обучении.
У AMPPS имеется свой собственный сайт, на котором можно скачать свежую версию установочного
пакета, также на него можно перейти при помощи QR-кода. Данный сайт можно легко найти в
интернете. Для этого откроем любой браузер, например, Edge (рис. 1.4), и введём в поисковую
строку запрос «AMPPS». Далее переходим на первую полученную вкладку официального сайта
AMPPS (рис. 1.5). После перехода по ссылке откроется официальный сайт платформы AMPPS. На
данной странице размещена ссылка на загрузку установочного файла (Windows, macOS, Linux) (рис.
1.6).
Рис. 1.4. Открываем любой браузер для выполнения запроса
Рис. 1.5. Переход по ссылке на
официальный сайт AMPPS
Рис. 1.6. Ссылка на загрузку
установочного файла
А в чем разница?
Что такое
интернет?
Если операционная система – Windows, необходимо нажать на кнопку «Download» под
соответствующей иконкой (рис. 1.7, п. 1). Для системы macOS скачать программу можно точно так
же, только нужно нажать кнопку под иконкой macOS (рис. 1.7, п. 2).
Рис. 1.7. Загрузка установочного файла для Windows и macOS
После загрузки файла приступим к самой установке. Открываем файл и первым делом принимаем
лицензионное соглашение программы (рис. 1.8), после чего в новом открывшемся окне
«Information» нажимаем «Next» (рис. 1.9).
Второй шаг — это выбор папки размещения данной программы и отображение в стартовом меню
«Пуск». При нажатии на кнопку «Browse…» откроется проводник для выбора пути расположения
AMPPS (рис. 1.10, п. 1). Если путь уже выбран, или стандартный предложенный путь программы
устраивает, дополнительных настроек не производим. Нажимаем на кнопку «Next» (рис. 1.10, п. 2).
После откроется окно для включения отображения папки в стартовом меню (рис. 1.11).
Рис. 1.8. Лицензионное соглашение AMPPS
Рис. 1.9. Окно информации
Рис. 1.10. Выбор места расположения
программы на компьютере
Рис. 1.11. Отображение папки в стартовом
меню
Следующим шагом будет выбор дополнительных задач, таких как создание ярлыка на рабочем
столе, иконки быстрого доступа и иконки в стартовом меню (рис. 1.12, п. 1). Включим «Create a
desktop shortcut», если необходимы другие задачи, то включите по своему усмотрению (рис. 1.12,
п. 2). После чего начнем установку приложения (рис. 1.13).
Рис. 1.12. Выбор дополнительных задач
Рис. 1.13. Установка программы
По окончании установки программы AMPPS откроется лицензионное окно Microsoft Visual C++, в
котором принимаем условия лицензии (рис. 1.14, п. 1). Программа AMPPS установлена (рис. 1.15).
Рис. 1.14. Лицензионное соглашение
Microsoft Visual C++ и установка
Рис. 1.15. Окончание установки
программы AMPPS
Когда программа AMPPS скачана и установлена, в нее необходимо загрузить все необходимые
языки программирования для создания сайта (рис. 1.16), данный процесс займет несколько минут.
После окончания загрузки в окне программы отобразятся необходимые языки (рис. 1.17).
Рис. 1.16. Загрузка языков
программирования
Рис. 1.17. Интерфейс программы AMPPS
В открывшейся программе AMPPS можно проводить различную настройку при помощи значка в
виде шестеренки (рис. 1.18, п. 1). Для проверки работы программы перейдем на главную страницу
localhost, нажав на кнопку в виде карты мира в верхней панели инструментов (рис. 1.18, п. 2). На
открывшейся странице будут отображаться файлы, находящиеся в папке «WWW». Так мы
убедимся, что программа AMPPS работает (рис. 1.19).
Кто создал
интернет?
Когда день рождения у
интернета?
О чем был первый
сайт?
Рис. 1.18. Настройка среды разработки
Рис. 1.19. Проверка работы программы
Установка Visual Studio Code
Visual Studio Code – это упрощенный, но мощный редактор кода, который
работает на компьютере и доступен для Windows, macOS и Linux. Имеет
встроенную поддержку JavaScript. Эта программа упрощает написание кода.
Для данного модуля также понадобится программа Microsoft Visual Studio Code, ее можно найти на
официальном сайте Visual Studio Code по ссылке, либо перейдя по QR-коду. Указав в поисковой
строке «Microsoft Visual Studio Code скачать» и перейдя на первый полученный запрос (рис. 1.20),
мы окажемся на официальном сайте. Далее открываем страницу для загрузки (рис. 1.21), где
увидим варианты устоновочного файла для трех операционных систем (Windows, Linux, Mac) (рис.
1.22).
Рис. 1.20. Переход по ссылке на официальный сайт Visual Studio Code
Рис. 1.21. Ссылка на загрузку
установочного файла
Рис. 1.22. Загрузка установочного файла
для Windows, Linux и macOS
После загрузки файла приступим к установке. Принимаем лицензионное соглашение (рис. 1.23). В
новом окне выбираем путь размещения папки программы Visual Studio Code (рис. 1.24, п. 1), если
выбранный путь по умолчанию устраивает, никаких изменений не нужно делать (рис. 1.24, п. 2).
Рис. 1.23. Лицензионное соглашение
Visual Studio Code
Рис. 1.24. Выбор места расположения
программы на компьютере
Следующим шагом отказываемся создавать ярлык в меню «Пуск», при необходимости можете его
включить (рис. 1.25). После включаем все дополнительные задачи (рис. 1.26).
Рис. 1.25. Отображение папки в стартовом
меню
Рис. 1.26. Включение дополнительных
задач программы
Все настройки перед установкой программы сделаны, нажимаем кнопку «Установить» (рис. 1.27).
После завершения всех действий откроется стартовое окно программы для начала создания
программного кода.
Рис. 1.27. Установка программы
На стартовой странице можно выбрать тему интерфейса, темную или светлую (рис. 1.28, п. 1), также
необходимо установить языковой пакет с русским языком. Для этого в появившемся уведомлении
внизу нажмем «Установить и перезагрузить» (рис. 1.28, п. 2). Если данное уведомление не
появилось, то можно при помощи сочетания клавиш Ctrl+Shift+P открыть поисковую строку,
написать слово «config» – в первой строке поиска появится «Настройка языка интерфейса/Configure
Display Language». Нажимаете на нее и выбираете необходимый язык интерфейса (рис. 1.29).
Рис. 1.28. Стартовая страница запуска Visual Studio Code
Рис. 1.29. Настройка языка интерфейса
Настроив язык интерфейса, переходим к расширениям в левой части меню (рис. 1.30, п. 1). В
поисковой строке вводим «Intelep…» (рис. 1.30, п. 2), программа выводит в первой же строке
необходимое расширение «PHP Intelephense». Устанавливаем его (рис. 1.30, п. 3). Данное
расширение упростит поиск ассоциативных подсказок при разработке. Программа готова к работе!
Рис. 1.30. Установка расширения
На этом первое занятие окончено!
В рамках этого занятия мы установили все нужные программы и изучили их интерфейс.
На следующем занятии мы узнаем, как работают сайты и рассмотрим язык HTML.
После прохождения каждого занятия рекомендуем повторить все термины, которые были изучены,
а также закрепить пройденный материал, ответив на контрольные вопросы.
Это нужно запомнить
AMPPS (WAMP – MAMP – LAMP) – это пакет решений Apache,
MySQL, PHP, Perl и Python для Windows и macOS.
WAMP – Windows Apache MySQL PHP.
MAMP – Mac Apache MySQL PHP.
LAMP – Linux Apache MySQL PHP.
Apache – веб-сервер, отличающийся широкими возможностями
конфигурации и высоким уровнем поддержки.
MySQL – система управления базами данных.
PHP – скриптовый язык общего назначения, интенсивно
применяемый для разработки веб-приложений.
Perl – язык программирования общего назначения.
Python – это язык программирования, который широко используется
в интернет-приложениях, разработке программного обеспечения,
науке о данных и машинном обучении.
Visual Studio Code – это упрощенный, но мощный редактор исходного
кода, который работает на компьютере и доступен для Windows,
macOS и Linux. Имеет встроенную поддержку JavaScript. Эта
программа упрощает написание кода.
Контрольные вопросы
1. Что такое AMPPS?
2. Что такое PHP?
3. Что такое Visual Studio Code?
4.
Что такое интернет?
Интернет — это сеть компьютеров, которые связаны между собой по всему миру. Эти
компьютеры могут общаться друг с другом и обмениваться информацией.
Что обозначает www?
World Wide Web – Всемирная паутина.
А в чем разница?
Всемирная паутина «WWW» — это веб-сайты, веб-сервера, протокол HTTP/HTTPS и
браузер.
Интернет — это всемирная паутина «WWW», плюс каналы связи, передатчики и
ретрансляторы, спутники, кабели и др., то есть это все заставляет работать всемирную
сеть.
Кто создал интернет?
Создателем и родоначальником Всемирной паутины считается британец Тимоти Джон
Бернерс-Ли.
Когда день рождения у интернета?
Есть разные мнения о том, какую именно дату считать днём рождения интернета и с
каким событием это должно быть связано. Но 1989 год однозначно стал отправной
точкой целой эпохи (Тимоти Джон Бернерс-Ли опубликовал предложение о создании
сети) — эпохи Всемирной паутины.
О чем был первый сайт?
Тимоти Джон Бернерс-Ли 6 августа 1991 г. запустил первый в мире веб-сайт – он был
посвящен самому интернету.